<template>
	<div>
		<el-form :model="form.addUserFormInfo" :rules="rules.addUserFormInfo" ref="form.addUserFormInfo">
			
			<el-form-item label="角色选择" :label-width="formLabelWidth" prop="roleId">
		      		<el-select placeholder="选择用户角色" v-model="form.addUserFormInfo.roleId" size="small">
		                <el-option v-for="item in roleList" :label="item.label" :value="item.value" :key="item.value"></el-option>
				    </el-select>
		    </el-form-item>

			<el-form-item label="姓名" :label-width="formLabelWidth" prop="user_name">
		      <el-input v-model="form.addUserFormInfo.user_name" :label-width="formLabelWidth" placeholder="用户姓名"></el-input>
			</el-form-item>

			<el-form-item label="用户名" :label-width="formLabelWidth" prop="account_name">
		      <el-input v-model="form.addUserFormInfo.account_name" :label-width="formLabelWidth" placeholder="字母数字下划线组成"></el-input>
			</el-form-item>

			<el-form-item label="密码" :label-width="formLabelWidth" prop="account_pwd">
		      <el-input v-model="form.addUserFormInfo.account_pwd" :label-width="formLabelWidth" class="pwd_input" :disabled="true"></el-input>
		      <el-button type="primary" @click="randPwd">随机生成</el-button>
			</el-form-item>

		    
		    
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog">取 消</el-button>
		    <el-button type="primary" @click="dialogBtnOk">确 定</el-button>
		  </div>
	</div>
</template>

<script>
import _http from '../common/http.vue'

export default{
	props:['roleList'],
	data(){
		return{
			form:{
				addUserFormInfo:{
					account_name:'',
					account_pwd:'',
					roleId:'',
					user_name:''
				}
			},
			rules:{
				addUserFormInfo:{
					account_name:[
						{required:true,message:'请输入用户名',trigger:'blur'},
						{min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}
					],
					account_pwd:[
						{required:true,message:'请生成密码'}
					],
					roleId:[
						{required:true,message:'请选择角色'}
					],
					user_name:[
						{required:true,message:'用户姓名'}
					]
				}
			},
			formLabelWidth:'120px',
		}
	},
	mounted(){
	},
	methods:{
		randPwd(){
			var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
			var n = 8, s = "";
			for(var i = 0; i < n; i++){
			    var rand = Math.floor(Math.random() * str.length);
			    s += str.charAt(rand);
			}
			this.form.addUserFormInfo.account_pwd = s
		},
		closeDialog(){
			this.$emit('closeDialog')
		},
		dialogBtnOk(){
			_http.formValidate(this,'form.addUserFormInfo',(valid)=>{
				if (!valid) {return false}
				
				_http.axiosRequest(this,'addUser',{form:this.form.addUserFormInfo},(res)=>{
					if(_http.apiResult(this,res.data)){
						this.$emit('freshList')
						this.closeDialog()
					}
				})

			})
			
		}

	}
}	
</script>
<style>
.dialog-footer{
	text-align: center;
}
.pwd_input{
	width:200px;
	display: inline-block;
}	
</style>